<template>
  <div v-if="columns.length" class="p-10px table-search">
    <el-form ref="formRef" :model="state">
      <Grid
        ref="gridRef"
        :collapsed="collapsed"
        :gap="[20, 0]"
        :cols="searchCol"
      >
        <GridItem
          v-for="(item, index) in columns"
          :key="item.prop"
          v-bind="getResponsive(item)"
          :index="index"
        >
          <el-form-item>
            <template #label>
              <el-space :size="4">
                <span>{{ item.label }}</span>
              </el-space>
              <span>&nbsp;:</span>
            </template>
            <SearchFormItem :column="item" :search-param="state" />
          </el-form-item>
        </GridItem>
        <GridItem suffix>
          <div class="operation text-right">
            <el-button
              type="primary"
              size="small"
              :icon="Search"
              @click="search"
            >
              搜索
            </el-button>
            <el-button :icon="Delete" size="small" @click="reset">
              重置
            </el-button>
            <el-button
              v-if="showCollapse"
              type="primary"
              link
              class="search-isOpen"
              @click="collapsed = !collapsed"
            >
              {{ collapsed ? '展开' : '折叠' }}
              <el-icon class="el-icon--right">
                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
              </el-icon>
            </el-button>
          </div>
        </GridItem>
      </Grid>
    </el-form>
  </div>
</template>
<script setup name="SearchForm">
import { computed, ref } from 'vue'
import { Delete, Search, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import SearchFormItem from '@/components/SearchForm/components/SearchFormItem.vue'
import Grid from '@/components/Grid/index.vue'
import GridItem from '@/components/Grid/components/GridItem.vue'

const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  state: {
    type: Object,
    default: () => ({})
  },
  searchCol: {
    type: Object,
    default: () => ({ xs: 2, sm: 2, md: 3, lg: 3, xl: 5 })
  }
})

const emits = defineEmits(['search'])

// 默认

// 获取响应式设置
const getResponsive = item => {
  return {
    span: item.layout?.span || 1,
    offset: item.layout?.offset ?? 0,
    xs: item.layout?.xs,
    sm: item.layout?.sm,
    md: item.layout?.md,
    lg: item.layout?.lg,
    xl: item.layout?.xl
  }
}

// 是否默认折叠搜索项
const collapsed = ref(true)

// 获取响应式断点
const gridRef = ref()
const breakPoint = computed(() => gridRef.value?.breakPoint)

// 判断是否显示 展开/合并 按钮
const showCollapse = computed(() => {
  let show = false
  props.columns.reduce((prev, current) => {
    prev +=
      (current.layout?.[breakPoint.value]?.span ?? current.layout?.span ?? 1) +
      (current.layout?.[breakPoint.value]?.offset ??
        current.layout?.offset ??
        0)
    if (typeof props.searchCol !== 'number') {
      if (prev >= props.searchCol[breakPoint.value]) show = true
    } else {
      if (prev >= props.searchCol) show = true
    }
    return prev
  }, 0)
  return show
})
const search = () => {
  emits('search')
}
const reset = () => {
  emits('reset')
}
</script>
